import { Select } from 'antd'
import { getChannelsAPI } from 'api/channels'
import { useEffect, useState } from 'react'

// https://ant-design.gitee.io/components/form-cn/#components-form-demo-customized-form-controls
// 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：
// 提供受控属性 value 属性。
// 提供 onChange 事件。
export default function Channel({ value, onChange }) {
  // 定义频道状态
  const [channels, setChannels] = useState([])

  // 定义获取频道的函数
  const getChannelList = async () => {
    const res = await getChannelsAPI()
    // console.log(res)
    setChannels(res.data.channels)
  }

  useEffect(() => {
    getChannelList()
  }, [])

  return (
    <Select
      // 自定义表单控件：绑定 value 和 onChange
      value={value}
      onChange={onChange}
      style={{ width: 200 }}
      placeholder='选择文章频道'
      allowClear
    >
      {channels.map((item) => (
        <Select.Option key={item.id} value={item.id}>
          {item.name}
        </Select.Option>
      ))}
    </Select>
  )
}
